<template>
  <div>
    <div class="main max-width">
      <el-card class="max-width" v-for="(item,index) in menus" :key="index">
        <div slot="header">
          <span>{{ item.name }}</span>
        </div>
        <a class="link" @click="urlClick(it)" v-for="(it,_index) in item.menus" :key="_index">
          <el-tag>{{ it.name }}</el-tag>
        </a>
      </el-card>
    </div>
    <div style="display: flex;">
      《@npm_package_name@》 @ENVNAME@ 环境构建于 @BUILDAT@
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

export default {
  data: function () {
    return {
      menus: [
        {
          name:"vue",menus:[
            {name:"immediate",url:"/vue/immediate"}
          ]
        },
        {
          name: "selector", menus: [
            {name: "值与数据不匹配", url: "/selector/un-match"},

          ]
        }
        ]
    }
  },
  async mounted() {
    // jv.await(200, 10, () => {
    //   if (top.jv.main && top.jv.main.menus && top.jv.main.menus.length) {
    //     this.menus = top.jv.main.menus;
    //     return false;
    //   }
    // })
  },

  methods: {
    urlClick(item) {
      top.jv.main.$router.push(item.url);
    }
  }
}
</script>

<style scoped>
.main {
  display: grid;
  grid-gap: 20px;
  margin: 20px;
}

@media (min-width: 800px) {
  .main {
    grid-template-columns: repeat(2, 1fr);
  }
}


.main .link {
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-block;
}
</style>
